<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			[v-cloak] {
				display: none;
			}
			body{
				overflow-x: hidden;
			}
			.nav {
				height: 50px;
				background: #CCCCCC;
				position: relative;
				text-align: center;
			}
			
			.title {
				line-height: 50px;
				color: #FFFFFF;
			}
			
			.list1,
			.list2 {
				width: 100%;
				line-height: 40px;
				background: deepskyblue;
				position: absolute;
				top: 50px;
				left: 0;
			}
			
			.list1>p,
			.list2>p {
				border-bottom: 1px solid #FFFFFF;
				padding: 0 30px;
				position: relative;
				color: #FFFFFF;
			}
			
			.list1>p>span {
				position: absolute;
				right: 30px;
			}
			.no1-enter,
			.no1-leave-to {
				top: 150px;
				opacity: 0;
			}
			
			.no1-enter-active,
			.no1-leave-active {
				transition: all .5s;
			}
			
			.no1-enter-to,
			.no1-leave {
				top: 50px;
				opacity: 1;
			}
			.no2-enter,
			.no2-leave-to {
				left: -100%;
				opacity: 0;
			}
			
			.no2-enter-active,
			.no2-leave-active {
				transition: all .5s;
			}
			
			.no2-enter-to,
			.no2-leave {
				left: 0;
				opacity: 1;
			}
			.no3-enter,
			.no3-leave-to {
				left: 100%;
				opacity: 0;
			}
			
			.no3-enter-active,
			.no3-leave-active {
				transition: all .5s;
			}
			
			.no3-enter-to,
			.no3-leave {
				left: 0;
				opacity: 1;
			}
		</style>
	</head>

	<body>
		<div id="box" v-cloak>
			<div class="nav">
				<div class="title" @click="btn1">导 航</div>
				<transition :name="list1tranistion">
					<div class="list1" v-show="list1Type">
						<p v-for="i in arr">
							{{i.title}}
							<span style="float: right;" v-if="i.arr.length" @click="btn2(i.arr)">></span>
						</p>
					</div>
				</transition>
				<transition name="no3">
					<div class="list2" v-show="list2Type">
						<p @click="btn3">返回上一级</p>
						<p v-for="i in childarr">
							{{i.title}}
						</p>
					</div>
				</transition>
			</div>
			<div>
				内容
			</div>
		</div>
	</body>
	<script src="../js/vue.js"></script>
	<script>
		new Vue({
			el: "#box",
			methods: {
				btn1() {
					if(!this.list2Type) {
						this.list1tranistion = 'no1'
					}

					this.list1Type = !this.list1Type
					this.list2Type = false
				},
				btn2(arr) {
					this.list1tranistion = 'no2'
					this.childarr = arr
					this.list1Type = false
					this.list2Type = true
				},
				btn3() {
					this.list1Type = true
					this.list2Type = false
				}
			},
			data: {
				list1Type: true,
				list2Type: false,
				list1tranistion: 'no1',
				childarr: [],
				arr: [{
						title: '首页',
						arr: []
					},
					{
						title: '产品分类',
						arr: [{
								title: '产品分类1'
							},
							{
								title: '产品分类2'
							}
						]
					},
					{
						title: '联系我们',
						arr: [{
								title: '联系我们1'
							},
							{
								title: '联系我们2'
							},
							{
								title: '联系我们3'
							}
						]
					},
				]
			}
		})
	</script>

</html>